import React, { useState } from 'react';
import Crumbs from '../../components/crumbs/index';
import { Button, Table, message, Modal, Input, Radio, Select } from 'antd';
import { getSlide, deleteSlide } from '../../api/store';
import './scss/slideshow.scss';
const { Option } = Select;

function handleChange(value) {
  console.log(`selected ${value}`);
}

const Slideshow = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [dataSource, setdataSource] = useState([
    { id: '0001', sort: '1', title: '中药', isShow: '1', key: '0' },
    { id: '0002', sort: '2', title: '中药', isShow: '1', key: '1' },
    { id: '0003', sort: '3', title: '中药', isShow: '1', key: '2' },
  ]);

  const [columnsList] = useState([
    {
      title: 'ID',
      dataIndex: 'id',
      render: (id) => <div>{id}</div>,
    },
    {
      title: '显示序列',
      dataIndex: 'sort',
    },
    {
      title: '标题',
      dataIndex: 'title',
      ellipsis: true,
    },
    {
      title: '状态',
      dataIndex: 'isShow',
      key: 'isShow',
      render: (key) => <div>{key ? '显示' : '隐藏'}</div>,
    },
    {
      title: '操作',
      dataIndex: 'id',
      render: (id) => (
        <div>
          <Button type="text" onClick={() => handleCancel(id)}>
            修改
          </Button>
          <Button type="text" onClick={() => handleCancel(id)}>
            删除
          </Button>
        </div>
      ),
    },
  ]);
  const [CrumbsList] = useState([
    {
      name: '积分商城',
    },
    {
      name: '分类管理',
      url: '/classShow',
    },
  ]);

  // 删除
  let deleteItem = (id) => {
    deleteSlide({ id }).then((res) => {
      if (res.code === 200) {
        message.success('已删除');
        let newData = res.data.reverse();
        for (let i = 0; i < newData.length; i++) {
          newData[i].key = i;
        }
        setdataSource(newData);
      } else if (res.code === 204) {
        message.warning('请稍后再试');
      }
    });
  };

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };
  return (
    <div className="Slideshow" id="showModalId">
      <Crumbs CrumbsList={CrumbsList} />
      <Button className="addSlideshow" onClick={showModal}>
        添加新积分商品分类
      </Button>
      <div className="Tablebox">
        <Table columns={columnsList} bordered pagination={false} dataSource={dataSource} />
      </div>
      <Modal
        title="添加分类"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
        footer={null}
        getContainer={document.getElementById('showModalId')}
        bodyStyle={{ height: '400px' }}>
        <table className="ModalTable">
          <tbody>
            <tr>
              <td>排序</td>
              <td>
                <Select defaultValue="1" style={{ width: '100%' }} onChange={handleChange}>
                  <Option value="1">1</Option>
                  <Option value="2">2</Option>
                  <Option value="3">3</Option>
                </Select>
              </td>
            </tr>
            <tr>
              <td>请输入分类名称</td>
              <td>
                <Input autoComplete="off" placeholder="请输入分类名称" />
              </td>
            </tr>
            <tr>
              <td>状态</td>
              <td>
                <Radio.Group name="radiogroup" defaultValue={1}>
                  <Radio value={1}>显示</Radio>
                  <Radio value={0}>隐藏</Radio>
                </Radio.Group>
              </td>
            </tr>
            <tr>
              <td></td>
              <td>
                <Button type="primary">确认</Button>
                <Button style={{ marginLeft: '60px' }} onClick={handleCancel}>
                  取消
                </Button>
              </td>
            </tr>
          </tbody>
        </table>
      </Modal>
    </div>
  );
};

export default Slideshow;
